<template>
	<view>
		<view class="modItem padd" v-if="currPage == 'zxsDet'">
			<view class="modTit hasFlex">
				<image class="modImg" src="../../static/images/zx/zixun.png"></image>
				<view>咨询经验</view>
			</view>
			<view class="modCon hasFlex">
				<view class="zxExpItem">
					<view class="zxNum">
						<text class="font">{{zxsInfo.serviceTimes}}</text>
						<text>人次</text>
					</view>
					<view class="expTit">咨询人次</view>
				</view>
				<view class="zxExpItem">
					<view class="zxNum">
						<template v-if="calWrokRange(zxsInfo.workRange).length > 1">
							<text class="font">{{calWrokRange(zxsInfo.workRange)[0]}}</text>
							<text>年</text>
							<text>零</text>
							<text class="font">{{calWrokRange(zxsInfo.workRange)[1]}}</text>
							<text>个</text>
							<text>月</text>
						</template>
						<template v-else>
							<text class="font">{{calWrokRange(zxsInfo.workRange)[0]}}</text>
							<text>年</text>
						</template>
					</view>
					<view class="expTit">从业年限</view>
				</view>
				<view class="zxExpItem">
					<view class="zxNum">
						<text class="font">{{zxsInfo.serviceHours}}</text>
						<text>小时</text>
					</view>
					<view class="expTit">服务时长</view>
				</view>
			</view>
		</view>
		<view class="modItem padd">
			<view class="modTit hasFlex">
				<view class="iconfont icon-profile"></view>
				<view>个人简介</view>
			</view>
			<view class="modCon">
				<view class="profile">
					<rich-text :nodes="zxsInfo.profile"></rich-text>
				</view>
			</view>
		</view>
		<view class="modItem padd">
			<view class="modTit hasFlex">
				<view class="iconfont icon-jinbi"></view>
				<view>教育程度</view>
			</view>
			<view class="modTagCon hasFlex">
				<view class="modTag">{{zxsInfo.education}}</view>
			</view>
		</view>
		<view class="modItem padd">
			<view class="modTit hasFlex">
				<view class="iconfont icon-jinbi"></view>
				<view>擅长语言</view>
			</view>
			<view class="modTagCon hasFlex">
				<view class="modTag"
					v-for="(item,index) in toArrayFuns((zxsInfo.language || ''),',')"
					:key="index"
				>{{item}}</view>
			</view>
		</view>
		<view class="modItem padd">
			<view class="modTit hasFlex">
				<view class="iconfont icon-jinbi"></view>
				<view>荣获证书</view>
			</view>
			<view class="modCon smPadd">
				<view class="zsItem"
					v-for="(item,index) in toArrayFuns((zxsInfo.zsName || ''),',')"
					:key="index"
				>{{item}}</view>
			</view>
		</view>
		<view class="modItem padd">
			<view class="modTit hasFlex">
				<view class="iconfont icon-jinbi"></view>
				<view>擅长领域</view>
			</view>
			<view class="modCon">
				<view class="sclyItem"
					v-for="(item,index) in scRange"
					:key="index"
				>
					<view class="mainLy hasFlex">
						<view class="cir"></view>
						<view class="lyTit">{{item.parentLyName}}</view>
					</view>
					<view class="subLy hasFlex">
						<view class="subLyItem"
							v-for="(innerItem,innerIndex) in item.subLyList"
							:key="innerIndex"
						>{{innerItem.lyName}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="modItem padd">
			<view class="modTit hasFlex">
				<view class="iconfont icon-jinbi"></view>
				<view>擅长领域介绍</view>
			</view>
			<view class="modCon">
				<view class="profile">
					<rich-text :nodes="zxsInfo.scRangeDetail"></rich-text>
				</view>
			</view>
		</view>
		<view class="modItem padd">
			<view class="modTit hasFlex">
				<view class="iconfont icon-jinbi"></view>
				<view>擅长服务</view>
			</view>
			<view class="modTagCon hasFlex">
				<view class="modTag"
					v-for="(item,index) in toArrayFuns((zxsInfo.scService || ''),',')"
					:key="index"
				>{{item}}</view>
			</view>
		</view>
		<view class="modItem padd">
			<view class="modTit hasFlex">
				<view class="iconfont icon-jinbi"></view>
				<view>擅长人群</view>
			</view>
			<view class="modTagCon hasFlex">
				<view class="modTag"
					v-for="(item,index) in toArrayFuns((zxsInfo.scCrowd || ''),',')"
					:key="index"
				>{{item}}</view>
			</view>
		</view>
		<view class="modItem padd">
			<view class="modTit hasFlex">
				<view class="iconfont icon-jinbi"></view>
				<view>咨询流派</view>
			</view>
			<view class="modTagCon hasFlex">
				<view class="modTag"
					v-for="(item,index) in toArrayFuns((zxsInfo.zxLp || ''),',')"
					:key="index"
				>{{item}}</view>
			</view>
		</view>
		<view class="modItem padd">
			<view class="modTit hasFlex">
				<view class="iconfont icon-jinbi"></view>
				<view>咨询风格</view>
			</view>
			<view class="modTagCon hasFlex">
				<view class="modTag"
					v-for="(item,index) in toArrayFuns((zxsInfo.zxFg || ''),',')"
					:key="index"
				>{{item}}</view>
			</view>
		</view>
		<view class="modItem padd">
			<view class="modTit hasFlex">
				<view class="iconfont icon-jinbi"></view>
				<view>咨询风格介绍</view>
			</view>
			<view class="modCon">
				<view class="profile">
					<rich-text :nodes="zxsInfo.zxFgDetail"></rich-text>
				</view>
			</view>
		</view>
		<view class="modItem padd" v-if="zxsInfo.trainList.length > 0">
			<view class="modTit hasFlex">
				<view class="iconfont icon-jinbi"></view>
				<view>培训经历</view>
			</view>
			<view class="modCon">
				<timeAxis :dataArray="zxsInfo.trainList"></timeAxis>
			</view>
		</view>
	</view>
</template>

<script>
	import timeAxis from '@/components/time_axis/time_axis.vue'
	export default {
		props:{
			zxsInfo:Object,
			scRange:Array,
			currPage:{//zxsDet (zxsRz-zxsArchive)//咨询师入驻查看档案
				type:String,
				default:'zxsDet' 
			}
		},
		components:{
			timeAxis
		},
		computed:{
			calWrokRange(){
				return function(workRange){
					var tmpArr = workRange.split(',');
					return tmpArr;
				}
			},
			toArrayFuns(){
				return function(str,splitQuote){
					var tmpArr = str.split(splitQuote);
					return tmpArr;
				}
			},
		},
		data(){
			return{
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modItem{
		$comBg:#FAF9FE;
		$tagBg:#F4F5F7;
		$font:'Staatliches';
		margin-bottom: 30rpx;
		.modTit{
			font-size: 30rpx;
			color: $pss-text-color0;
			align-items: center;
			margin-bottom: 20rpx;
			.modImg{
				width: 32rpx;
				height: 32rpx;
				margin: 5rpx 10rpx 0 0;
			}
			.icon-profile,
			.icon-jinbi{
				font-size: 38rpx;
				color: $pss-color-blueDeep;
			}
			.icon-jinbi{
				margin: 5rpx 10rpx 0 0; 
				font-weight: 600;
			}
		}
		.modCon{
			background: $comBg;
			padding: 30rpx 20rpx;
			border-radius: 10rpx;
			.zxExpItem{
				flex: 1;
				text-align: center;
				color: $pss-text-color0;
				.zxNum{
					font-size: 26rpx;
				}
				.font{
					font-family: $font;
					color: $pss-color-blueDeep;
					font-size: 36rpx;
					font-weight: 600;
					margin: 0 5rpx;
				}
				.expTit{
					font-size: 26rpx;
					margin-top: 5rpx;
				}
			}
			.profile{
				font-size: 28rpx;
				color: $pss-text-color6;
				line-height: 40rpx;
			}
			.zsItem{
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1rpx solid #DBDBDB;
				font-size: 28rpx;
				color: $pss-text-color6;
				&:last-child{
					border-bottom: none;
					margin-bottom: -5rpx;
				}
			}
			.sclyItem{
				margin-bottom: 20rpx;
				.mainLy{
					font-size: 28rpx;
					color: $pss-color-blueDeep;
					align-items: center;
					margin-bottom: 15rpx;
					.cir{
						width: 14rpx;
						height: 14rpx;
						background: $pss-color-blueDeep;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}
				.subLy{
					margin: 0 30rpx;
					font-size: 26rpx;
					color: $pss-text-color6;
					flex-wrap: wrap;
					.subLyItem{
						height: 40rpx;
						line-height: 40rpx;
						margin-right: 20rpx;
					}
				}
				&:last-child{
					margin-bottom: 0;
				}
			}
			&.smPadd{
				padding: 20rpx;
			}
		}
		.modTagCon{
			flex-wrap: wrap;
			.modTag{
				height: 50rpx;
				line-height: 50rpx;
				background: $tagBg;
				padding: 0 20rpx;
				border-radius: 6rpx;
				font-size: 26rpx;
				color: $pss-color-blueDeep;
				margin:0 20rpx 20rpx 0;
			}
		}
	}
</style>